<template>
  <div class="LedtContent">
    <div class="form-view">
      <!-- 搜索 -->
      <div class="form-row">
        <div class="form-row-label seach">
          <i class="el-icon-search" @click="ctgVauleSearch"></i>
        </div>
        <div class="form-row-right-content">
          <el-input v-model="ctgVaule" placeholder="" class="form-ipt" @keyup.enter.native="ctgVauleSearch"></el-input>
        </div>
      </div>
      <!-- checkbox -->
      <div class="form-checkbox" v-if="activeName != 'fourth'">
        <el-radio v-model="radio" label="1" @change="radioChange('1')" :disabled="isCustomerAFlg">{{
          $t("message.bhView.leftComponents.machine")
        }}</el-radio>
        <el-radio v-model="radio" label="2" @change="radioChange('2')" :disabled="isCustomerAFlg">{{
          $t("message.bhView.leftComponents.piping")
        }}</el-radio>
      </div>
      <!-- 装置 -->
      <div class="form-row">
        <div class="form-row-label">
          {{ $t("message.bhView.leftComponents.device") }}
        </div>
        <div class="form-row-right-content">
          <el-select v-model="valuePlant" :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
            @change="PlantChange()" @focus="getPlantApi(1, 1000)">
            <el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
              :value="item.pltCode"></el-option>
          </el-select>
        </div>
      </div>
      <!-- 机种 -->
      <div class="form-row" v-if="activeName != 'fourth'">
        <div class="form-row-label">
          {{ $t("message.bhView.leftComponents.typeOfMachine") }}
        </div>
        <div class="form-row-right-content">
          <el-select v-model="valueCodeCtg" :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
            @change="CodeCtgChange()" @focus="getCodeCtgApi(0, '', 1, 100, radio == '1' ? '0' : '1')">
            <el-option v-for="item in CodeCtg" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </div>
      </div>
      <!-- 法规 -->
      <div class="form-row" v-if="activeName != 'fourth'">
        <div class="form-row-label">
          {{ $t("message.bhView.leftComponents.statute") }}
        </div>
        <div class="form-row-right-content">
          <el-select v-model="valueCodeLaw" :placeholder="$t('message.bhView.label.placeholderSearch')" class="form-ipt"
            @change="CodeLawChange()" @focus="
              gtCodeLawApi(
                0,
                '',
                1,
                1000,
                valuePlant,
                parseInt(radio),
                valueCodeCtg
              )
              ">
            <el-option v-for="item in CodeLaw" :key="item.key" :label="item.label" :value="item.key"></el-option>
          </el-select>
        </div>
      </div>
      <!-- clear -->
      <div class="form-row" style="margin: 0" v-if="activeName != 'fourth'">
        <div class="form-row-label"></div>
        <div class="form-row-right-content">
          <el-button type="primary" class="ClearBtn" @click="ClearVaule">Clear</el-button>
        </div>
      </div>
    </div>

    <!-- 机器番号 -->
    <div class="machine-number-long machine-number" v-show="activeName != 'fourth'">
      <div class="title">
        <span v-if="radio == '1'">{{
          $t("message.bhView.leftComponents.MachineSerialNumber")
        }}</span>
        <span v-if="radio == '2' && !isCustomerAFlg">{{
          $t("message.bhView.leftComponents.PeiGuanNumber")
        }}</span>
        <span v-if="radio == '2' && isCustomerAFlg">ラインNo</span>
      </div>
      <div class="machine-number-body" ref="multipleTable">
        <div class="Item" v-for="(Item, index) in drwMgtData" :key="Item.dmgCode" @click="ClickTableRow(Item, index)"
          :class="index == itemActive ? 'ItemActive' : ''">
          <div class="ItemID">{{ index + 1 }}</div>
         
          <div class="ItemName" v-if="$hasOption('OPT_IDEM') && isCustomerAFlg">
            <el-tooltip class="item" effect="dark" :content="Item.name" placement="top">
              <span style="white-space: nowrap;">{{ Item.name }}</span>
            </el-tooltip>
          </div>

          <div class="ItemName" v-else>
            <el-tooltip class="item" effect="dark" :content="Item.macName" placement="top">
              <span style="white-space: nowrap;">{{ Item.macName }}</span>
            </el-tooltip>
          </div>

        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="bh-footer">
      <div class="bh-footer-msg">
        {{ $t("message.bhView.WallThicknessPattern.number") }}
        {{ activeName == "fourth" ? processorNumber : number }}
        {{ $t("message.bhView.WallThicknessPattern.piece") }}
      </div>
      <div class="bh-footer-msg">
        <span v-if="activeName == 'first'">{{
          $t("message.bhView.WallThicknessPattern.point")
        }}</span>
        <span v-if="activeName == 'second'">{{
          $t("message.bhView.WallThicknessPattern.abstract")
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPlant,
  getMachine,
  gtCodeLaw,
  getCodeCtg,
  getProcessor,
  GetExLineNoList
} from "@/api/api";
import eventBus from "@/eventBus/bus";
// import $ from "jquery";
// 导出模块
export default {
  // 模块名字
  name: "LeftContent",
  props: {
    numberData: Number,
    activeName: String,
    styleOptionsValue: Number,
  },
  // 模块数据
  data() {
    //数据
    return {
      isCustomerAFlg: false,
      input: "",
      radio: this.$store.state.excelMacType.toString(),
      options: [
        {
          value: "",
          label: "",
        },
      ],
      value: "",
      plantOptions: [],
      valuePlant: "",
      drwMgtData: [],
      CodeLaw: [],
      valueCodeLaw: "",
      CodeCtg: [],
      valueCodeCtg: "",
      number: 0,
      processorNumber: 0,
      itemActive: null,
      ReaditemActive: null,
      ctgVaule: "",
      processor: [],
      selectViewValue: 1,

      leftListRow: {},
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    // 获取装置
    getPlantApi(pageIndex, pageSize) {
      let dataJson = {
        pltCode: 0,
        platName: "",
        pageIndex: pageIndex,
        pageSize: pageSize,
      };
      getPlant(dataJson).then((res) => {
        this.plantOptions = [];
        if (res.data.code != 0) {
          return;
        }
        this.plantOptions = res.data.data;
      });
    },
    //获取机器/配管
    getMachineApi(macCode, macName, impCode, pageIndex, pageSize, isCreated = false) {
      let dataJson = {
        macCode: macCode == "" ? 0 : macCode,
        macName: macName,
        pltCode:
          this.$store.state.excelPltCode == ""
            ? 0
            : this.$store.state.excelPltCode,
        macType: parseInt(this.$store.state.excelMacType),
        ctgCode: isCreated ? 0 :
          this.$store.state.excelCtgCode == ""
            ? 0
            : this.$store.state.excelCtgCode,
        impCode: isCreated ? 0 : impCode == "" ? 0 : impCode,
        lawCode: isCreated ? 0 :
          this.$store.state.excelLawCode == ""
            ? 0
            : this.$store.state.excelLawCode,
        pageIndex: pageIndex,
        pageSize: 9999,
      };
      console.log(dataJson, "DDDDDDDDDDDDDDD", this.$hasOption('OPT_IDEM') && this.isCustomerAFlg)

      let Api = getMachine;
      if (this.$hasOption('OPT_IDEM') && this.isCustomerAFlg) {
        Api = GetExLineNoList;
      }

      Api(dataJson).then((res) => {
        this.drwMgtData = [];
        this.number = 0;
        if (res.data.code != 0) {
          // 机器列表异常 通知上层页面选中为空
          this.$store.commit("changeExcelMacName", '');
          this.$store.commit("changeExcelMacNameb", '');
          eventBus.$emit("leftListData", null);

          return;
        }
        this.drwMgtData = res.data.data;
        this.number = res.data.count;
        // this.itemActive = 0;
        var flg = false;
        this.drwMgtData.forEach((i, v) => {
          if (i.macName == this.$store.state.macNameb) {
            flg = true;
            console.log(i, "22222222222222222")
            this.itemActive = v;
            // this.$store.commit("changeExcelMacName", i.name);

            this.$store.commit("changeMacName", i.name);
            this.$store.commit("changeMacCode", i.macCode);
            setTimeout(() => {
              this.$refs.multipleTable.scrollTop = Number(23.9 * v);
            }, 300);
            this.ClickTableRow(i, v);
            let data = {
              row: this.drwMgtData[v],
              data: this.drwMgtData,
              MacName: macName,
              LawCode: this.$store.state.excelLawCode == ""
                ? 0
                : this.$store.state.excelLawCode,
              CtgCode: this.$store.state.excelCtgCode == ""
                ? 0
                : this.$store.state.excelCtgCode,
            };
            eventBus.$emit("leftListData", data);
          }
        })

        if (!flg) {
          this.ClickTableRow(this.drwMgtData[0], 0)
          this.$store.commit("changeExcelMacName", this.drwMgtData[0].macName);
          this.$store.commit("changeExcelMacNameb", this.drwMgtData[0].name);
          setTimeout(() => {
            this.$refs.multipleTable.scrollTop = 0;
          }, 300);
          let data = {
            row: this.drwMgtData[0],
            data: this.drwMgtData,
            MacName: macName,
            LawCode: this.$store.state.excelLawCode == ""
              ? 0
              : this.$store.state.excelLawCode,
            CtgCode: this.$store.state.excelCtgCode == ""
              ? 0
              : this.$store.state.excelCtgCode,
          };
          eventBus.$emit("leftListData", data);
        }

        // console.log(data,'---')
      });
    },
    //处理系一览
    getProcessorApi() {
      let dataJson = {
        pltCode:
          this.$store.state.excelPltCode == "" ? 0 : this.$store.state.excelPltCode,
      };
      getProcessor(dataJson).then((res) => {
        this.processor = [];
        this.processorNumber = 0;
        if (res.data.code != 0) {
          return;
        }
        this.ReaditemActive = 0;
        this.processor = res.data.data;
        this.processorNumber = res.data.data.length;
      });
    },
    //获取法规
    gtCodeLawApi(
      code,
      codName,
      pageIndex,
      pageSize,
      pltCode,
      macType,
      ctgCode
    ) {
      let dataJson = {
        code: code,
        codName: codName,
        pageIndex: pageIndex,
        pageSize: pageSize,
        pltCode:
          this.$store.state.pltCode == "" ? 0 : this.$store.state.pltCode,
        macType: this.$store.state.macType,
        ctgCode: ctgCode == "" ? 0 : ctgCode,
      };
      gtCodeLaw(dataJson).then((res) => {
        this.CodeLaw = [];
        if (res.data.code != 0) {
          return;
        }
        this.CodeLaw = res.data.data;
      });
    },
    // 机种
    getCodeCtgApi(code, codName, pageIndex, pageSize, codSymb) {
      let dataJson = {
        // code: code,
        // codName: codName,
        // pageIndex: pageIndex,
        // pageSize: pageSize,
        // codSymb: codSymb,
        macType: Number(this.radio)
      };
      getCodeCtg(dataJson).then((res) => {
        this.CodeCtg = [];
        if (res.data.code != 0) {
          return;
        }
        this.CodeCtg = res.data.data;
      });
    },
    //装置筛选
    PlantChange() {
      // 装置选择后更新装置code 和 名称
      this.$store.commit("changeExcelPltCode", this.valuePlant);
      this.plantOptions.forEach((Item) => {
        if (Item.pltCode == this.valuePlant) {
          let valuePlant = Item.pltName;
          this.$store.commit("changeExcelPlantName", valuePlant);
        }
      });
      this.getMachineApi("", "", "", 1, 1000);
      this.itemActive = null;
    },
    //机种筛选
    CodeCtgChange() {
      this.$store.commit("changeExcelCtgCode", this.valueCodeCtg);
      this.getMachineApi("", "", "", 1, 1000);
      this.itemActive = null;
    },
    //法规筛选
    CodeLawChange() {
      this.$store.commit("changeExcelLawCode", this.valueCodeLaw);
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);
      this.itemActive = null;
    },
    //点击表格行
    ClickTableRow(row, index) {
      console.log(this.$store.state.excelMacName)
      console.log(this.$store.state.excelMacNameb)
      this.itemActive = index;
      this.leftListRow = row;
      Object.assign(this.leftListRow, {
        MacName: this.ctgVaule,
        LawCode: this.valueCodeLaw,
        CtgCode: this.valueCodeCtg,
        PltCode: this.valuePlant
      })
      let data = {
        row: this.leftListRow,
        data: this.drwMgtData,

      };
      eventBus.$emit("leftListData", data);
      this.$store.commit("changeExcelMacName", row.macName);
      this.$store.commit("changeExcelMacNameb", row.name);

      // 通知名称和code跳回首页图纸加载対应机器
      this.$store.commit("changeMacName", row.name);
      this.$store.commit("changeMacCode", row.macCode);
      this.$store.commit("changeMacNameb", row.macName);
    },
    //清空默认筛选
    ClearVaule() {
      this.ctgVaule = "";
      this.valueCodeCtg = "";
      this.valueCodeLaw = "";
      this.$store.commit("changeExcelLawCode", this.valueCodeLaw);
      this.$store.commit("changeExcelCtgCode", this.valueCodeCtg);
      let _dataJson = {
        macCode: 0,
        macName: "",
        pltCode:
          this.$store.state.excelPltCode == ""
            ? 0
            : this.$store.state.excelPltCode,
        macType: parseInt(this.$store.state.excelMacType),
        ctgCode: 0,
        impCode: 0,
        lawCode: 0,
        pageIndex: 1,
        pageSize: 9999,
      };
      getMachine(_dataJson).then((res) => {
        this.drwMgtData = [];
        this.number = 0;
        if (res.data.code != 0) {
          return;
        }
        this.drwMgtData = res.data.data;
        this.number = res.data.count;
        this.itemActive = 0;
      });
    },
    ctgVauleSearch() {
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);
    },
    //切换机器或者配管 数据刷新
    radioChange(radio) {

      // 更新状态
      this.ctgVaule = "";
      this.valueCodeCtg = "";
      this.valueCodeLaw = "";
      this.$store.commit("changeExcelMacType", radio);
      this.$store.commit("changeMacType", radio);
      this.$store.commit("changeExcelLawCode", this.valueCodeLaw);
      this.$store.commit("changeExcelCtgCode", this.valueCodeCtg);
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() {
    //默认添加装置
    let dataJson = {
      pltCode: 0,
      platName: "",
      pageIndex: 1,
      pageSize: 1000,
    };
    getPlant(dataJson).then((res) => {
      this.plantOptions = [];
      if (res.data.code != 0) {
        this.valuePlant = null;
        this.$store.commit("changeExcelPltCode", null);
        return;
      }
      this.plantOptions = res.data.data;

      let filterFlg = this.plantOptions.filter(item => item.pltCode == this.$store.state.excelPltCode);
      if (this.$store.state.excelPltCode && filterFlg.length > 0) {
        this.valuePlant = this.$store.state.excelPltCode;
      } else {
        this.valuePlant = this.plantOptions[0].pltCode;
        this.$store.commit("changeExcelPltCode", this.valuePlant);
      }

      this.plantOptions.forEach((Item) => {
        if (Item.pltCode == this.valuePlant) {
          let valuePlant = Item.pltName;
          this.$store.commit("changeExcelPlantName", valuePlant);
        }
      });
      this.getProcessorApi();
      this.$store.commit("changeExcelCtgCode", '');
      this.$store.commit("changeExcelLawCode", '');
      // this.$store.commit("changeCtgCode", '');
      // this.$store.commit("changeLawCode", '');
      this.getMachineApi("", "", "", 1, 1000, true);
    });
  },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {

    eventBus.$on('ExeclReGetFn', (element) => {
      this.getMachineApi("", this.ctgVaule, "", 1, 1000);
      // this.ClearVaule();
    })

    eventBus.$on('isChangeCustomerAFn', (element) => {

      this.isCustomerAFlg = element;
      //  筛选到配管
      if (this.isCustomerAFlg) {
        this.radio = "2";

        this.radioChange('2');
        // this.$store.state.excelMacType = "2";
      } else {
        this.getMachineApi("", "", "", 1, 1000);
      }
    })
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {
  },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {
    eventBus.$off('ExeclReGetFn');
    eventBus.$off('isChangeCustomerAFn');

  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.LedtContent {
  width: 264px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.form-view {
  padding: 16px 0px 0px 24px;

  .form-row {
    width: 240px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .seach {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .form-row-label {
      color: rgba(0, 0, 0, 0.85);
      //   font-weight: 500;
    }

    .form-row-right-content {
      width: 197px;

      .form-ipt {
        width: 100%;
        height: 24px;

        ::v-deep .el-input__inner {
          height: 24px;
          background: #fff;
        }

        ::v-deep .el-input__icon {
          line-height: 24px;
        }
      }

      .ClearBtn {
        min-width: 66px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1px solid #eaeaeb;
        // background: #106ebe;
        // color: #fff;
        float: right;
      }
    }
  }

  .form-checkbox {
    padding: 0 0 12px 44px;
  }
}

.fourth-tabel-style {
  height: calc(100% - 138px) !important;
}

.machine-number-long {
  height: calc(100% - 282px) !important;
}

.machine-number {
  width: calc(100% - 24px);
  // height: calc(100% - 282px);
  height: calc(100% - 424px);
  border: 1px solid #c3c3c3;
  margin-left: 24px;

  // border-right: 0 none;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(195, 195, 195, 0.3);
  }

  .machine-number-body {
    width: 100%;
    height: calc(100% - 32px);
    overflow: hidden;
    overflow-y: auto;

    .Item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 24px;
      cursor: pointer;
      border-bottom: 1px solid rgba(195, 195, 195, 0.3);
      background: #ffffff;
      transition: 0.5s;

      .ItemID {
        width: 31px;
        min-width: 31px;
        height: 24px;
        border-right: 1px solid rgba(195, 195, 195, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.85);
      }

      .ItemName {
        padding-left: 24px;
        height: 100%;
        color: rgba(0, 0, 0, 0.65);
        display: flex;
        align-items: center;
        white-space: nowrap;
      }
    }

    .Item:hover {
      background: rgb(255, 241, 240);
    }

    .ItemActive {
      background: rgb(255, 241, 240);
    }
  }
}

.bh-style {
  width: calc(100% - 24px);
  // height: 352px;
  border: 1px solid #c3c3c3;
  margin-left: 24px;

  // border-right: 0 none;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(195, 195, 195, 0.3);
  }

  .bh-style-body {
    width: 100%;
    height: calc(100% - 32px);

    .Item {
      width: 100%;
      display: flex;
      height: 24px;
      justify-content: flex-start;
      align-items: center;
      color: rgba(0, 0, 0, 0.85);
      padding-left: 12px;
      border-bottom: 1px solid rgba(195, 195, 195, 0.3);
      background: #ffffff;
    }

    .item-label {
      width: 70px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .item-bh-msg {
      line-height: 24px;
      width: calc(100% - 70px);
      height: 100%;

      .right-text {
        float: right;
        margin-right: 12px;
      }
    }
  }
}

.bh-footer {
  // width: 100%;
  height: 38px;
  background: #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 24px;

  .bh-footer-msg {
    // width: 132px;
    height: 24px;
    line-height: 24px;
    padding-left: 8px;
    border-radius: 4px;
    margin: 0 4px;
  }
}

::v-deep .el-radio {
  margin-right: 24px;
}

::v-deep .el-radio:last-child {
  margin-right: 0;
}
</style>
